<template>
  <el-menu :default-active="activeIndex.key" mode="horizontal" :ellipsis="false" :router="true" @select="handleSelect">
    <el-menu-item index="/">
      <img style="width: 50px height: 50px" src="@/assets/tais.png" alt="Taishan"/>
    </el-menu-item>
    <div class="flex-grow"/>
    <el-menu-item index="/">门户</el-menu-item>
    <el-sub-menu index="/product">
      <template #title>服务</template>
      <el-menu-item index="/product/build">系统建设</el-menu-item>
      <el-menu-item index="/product/opt">系统运维</el-menu-item>
      <el-menu-item index="/product/ask">技术顾问</el-menu-item>
      <el-menu-item index="/product/team">团队搭建</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/tech/solution">方案展览</el-menu-item>
    <el-menu-item index="/tech/future">前沿技术</el-menu-item>
    <el-menu-item index="/connect">联系我们</el-menu-item>
    <el-menu-item index="/abmout-us">关于我们</el-menu-item>
  </el-menu>
  <div class="h-6" />
</template>
  
<script lang="ts">
  import {userChoiceStore} from '@/stores/counter'
  import { defineComponent, reactive, toRefs} from 'vue';
  export default defineComponent({
    setup() {
      const state = reactive({activeIndex: userChoiceStore()});
      return {
      ...toRefs(state)
      }
    },
    methods:{
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      handleSelect(key: string, _keyPath: string[]){
        this.activeIndex.set(key)
      }
    }
  }) 
</script>

<style>
.flex-grow {
  flex-grow: 1;
}
</style>